<template>
	<view>
		<!-- 广告插入 -->
		<adview title="展会通" @adfun="adfun"></adview>
		<view class="" v-if="!adShow">
			<view class="header">
				<view class="head_img"><image class="img" :src="CompanyData.info.thumb" mode="aspectFill"></image></view>
			</view>
			<view class="container cont_tit">
				<view class="cont p-2 bg-white rounded_10 shadow">
					<view class="flex align-center">
						<view class="status_day mr-2 ">{{ CompanyData.info.time_name }}</view>
						<view class="font c_3 lh_42 font-weight-bold">{{ CompanyData.info.title }}</view>
					</view>
					<view class="c_9 my-1 font_24">
						<text>{{ CompanyData.info.start_time }}</text>
						<text class="mx-5">{{ CompanyData.info.address }}</text>
					</view>
					<view class="flex justify-between align-center">
						<view class="tag c_9 font_24 my-1">
							<text class="p-1 mr-1" v-for="item of CompanyData.label" :key="item.id">{{ item.bq_name }}</text>
						</view>
						<view class="">
							<text class="font_24 c_9" @click="detailShow = true">详情 ></text>
							<u-modal :show="detailShow" title="展会详情" confirmText="关闭" @confirm="detailShow = false">
								<view class="slot-content w-100">
									<scroll-view scroll-y="true">
										<view class="u-content detail_popup">
											<view v-if="!CompanyData.info.content" class="p-2 mt-3">
												<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
											</view>
											<view class="text" v-else><u-parse :content="CompanyData.info.content"></u-parse></view>
										</view>
									</scroll-view>
								</view>
							</u-modal>
						</view>
					</view>
				</view>
				<view class="p-2 bg-white rounded_10 shadow mt-2">
					<view class="num_warp flex justify-around align-center">
						<view class="num_item text-center">
							<view class="font-small mb-1">参展产品</view>
							<text class="font-lg font-weight-bolder c_main">{{ CompanyData.parameter.conpamy_count }}</text>
						</view>
						<view class="line"></view>
						<view class="num_item text-center">
							<view class="font-small mb-1">参展企业</view>
							<text class="font-lg font-weight-bolder c_main">{{ CompanyData.parameter.enterprise_count }}</text>
						</view>
						<view class="line"></view>
						<view class="num_item text-center">
							<view class="font-small mb-1">参展热度</view>
							<text class="font-lg font-weight-bolder c_main">{{ CompanyData.parameter.heat_val }}</text>
						</view>
					</view>
				</view>
				<view>
					<view class="show_text p-2 bg-white rounded_10 shadow" style="margin-top: 14rpx;" v-if="onlineShow.datatwo && onlineShow.datatwo.length >= 1">
						<view class="show_row flex justify-start">
							<view class="tit_cont">
								<text class="label" v-if="onlineShow.dataone[0]">{{ onlineShow.dataone[0].title }}:</text>
								<view class="label_hot bg_main text-white">HOT</view>
							</view>
							<scroll-view scroll-x="true" show-scrollbar="false" class="scroll_cont">
								<text
									class="show_child mr-3"
									v-for="(item, idx) of onlineShow.datatwo"
									:key="item.id"
									@click="goPages('/subPages/exhibition/gallery/index?id=' + item.id + '&idx=' + idx + '&exhibitionId=' + exhibitionId)"
								>
									{{ item.title }}
								</text>
							</scroll-view>
						</view>
						<view @tap="searchFocus('')"><search-view :disabled="true" placeholder="请输入展位号或企业名称"></search-view></view>
						<view class="font_22 c_9 my-1" v-if="gallerySearch.length >= 1">
							热搜：
							<text class="mr-1" v-for="(item, index) of gallerySearch" :key="index" @tap="searchFocus(item)">{{ item }}</text>
						</view>
					</view>
					<view v-else><u-skeleton :title="false" rows="1" :rowsHeight="30" :loading="true" :animate="true"></u-skeleton></view>
				</view>
			</view>
			<view class="my-2" v-if="inform.length >= 1"><u-notice-bar :text="inform" :direction="inform.length == 1 ? 'row' : 'column'"></u-notice-bar></view>
			<view class="container">
				<view class="p-2 bg-white rounded_10 shadow" v-if="companLogo.length >= 1">
					<company-swiper :datas="companLogo" :config="config" @swiperChange="swiperChange"></company-swiper>
				</view>
				<view class="p-2 bg-white rounded_10 shadow mt-2">
					<title-view tit="最新动态" @lookall="goPages('/subPages/exhibition/news/index?exhibitionId=' + exhibitionId)"></title-view>
					<view v-if="listInfo.length <= 0" class="p-2 mt-3"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty></view>
					<view v-else class="bg-white p-2 news_box">
						<news-list :list="listInfo"></news-list>
						<u-loadmore :status="status" color="#E5E5E5" lineColor="#E5E5E5" dashed line />
					</view>
				</view>
			</view>
			<u-back-top :scroll-top="scrollTop"></u-back-top>
			<!-- 固定底部 -->
			<!-- <fix-btm
			:status="CompanyData.parameter.participate_status"
			:active="active"
			:exhibition-id="exhibitionId"
			:pro-num="proNum"
			:range="CompanyData.info.product_cate_name"
			:range-id="CompanyData.info.product_cate"
			@goJoin="goJoin"
		></fix-btm> -->
			<tabbar></tabbar>
		</view>
	</view>
</template>

<script>
import { exhibitionDetails, exhibitionHeatval, companySearch, companyLogoList, announcement } from '@/api/exhibition/exhibition.js';
import { getCloudshow, getHeavyNews } from '@/api/home/home.js';
import searchView from '@/components/search/search.vue';
import titleView from '@/components/titleView/title.vue';
import newsList from '@/components/news_list.vue';
import tabbar from '../components/bottom_tab/tabbar.vue';
import adview from '@/components/adview/adview.vue';
import companySwiper from '../components/company_swiper/swiper.vue';
export default {
	components: { searchView, titleView, newsList, tabbar, adview, companySwiper },
	data() {
		return {
			scrollTop: 0,
			//展会信息
			CompanyData: {
				info: {},
				label: [],
				parameter: {}
			},
			detailShow: false,
			proNum: 0,
			range: '',
			exhibitionId: '',
			active: '',
			onlineShow: {
				dataone: [],
				datatwo: []
			},
			gallerySearch: [], //展会查询
			inform: [], //公告
			companLogo: [], //企业logo
			listInfo: [], //最新动态
			page: 1,
			pageSize: 10,
			status: 'loadmore',
			suo: true,
			adShow: true,
			config: {
				autoplay: true, //是否自动轮播
				shadow: true, //是否显示两边渐变
				hideMargin: true, //是否显示右边距
				multiple: 3, //单页滑块数量
				interval: 900, //自动切换时间间隔
				duration: 3000, //滑动动画时长
				circular: true //是否采用衔接滑动
			}
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad(options) {
		this.exhibitionId = options.id;
		this.active = options.active;
		this.getInfo();
		this.getNews();
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	onShow() {
		this.messageTips();
		this.proNum = getApp().globalData.pro1.length + getApp().globalData.pro2.length; // 选择产品数量
	},
	onReachBottom() {
		if (this.suo) {
			//定义个小锁，当没有数据时锁住suo
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.getNews();
			}, 1000);
		}
	},
	methods: {
		// 广告页
		adfun(val) {
			this.adShow = val;
		},
		getInfo() {
			// 获取展会详情
			let msg = {
				id: this.exhibitionId,
				token: uni.getStorageSync('userInfo').token || ''
			};
			exhibitionDetails(msg)
				.then(res => {
					if (res.code == 0) {
						// console.log(res);
						this.CompanyData = res.data;
						uni.setNavigationBarTitle({
							title: res.data.info.abbreviation
						});
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log(err);
				});
			// 观展热度增加
			exhibitionHeatval(this.exhibitionId)
				.then(res => {
					// console.log(res);
					if (res.code == 0) {
						this.CompanyData.parameter.heat_val = res.heat_val;
					}
				})
				.catch(err => {
					console.log(err);
				});
			// 获取展馆
			getCloudshow({ id: this.exhibitionId })
				.then(res => {
					// console.log('展馆', res);
					if (res.code == 0) {
						this.onlineShow = res.data;
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log(err.msg);
				});
			// 获取展馆热门搜索关键词
			companySearch().then(res => {
				if (res.code == 0) {
					this.gallerySearch = res.data;
				} else {
					console.log('获取展馆热门关键词失败', res.msg);
				}
			});
			// 企业logo推广
			companyLogoList({ zhanhui_id: this.exhibitionId }).then(res => {
				// console.log(res);
				if (res.code == 0) {
					this.companLogo = res.data;
				} else {
					console.log('推广企业获取失败', res.msg);
				}
			});
			// 公告
			announcement({ zhanhui_id: this.exhibitionId, is_recommend: 0 }).then(res => {
				if (res.code == 0) {
					this.inform = res.data.map(item => item.content);
				} else {
					console.log('推广企业获取失败', res.msg);
				}
			});
		},
		// 企业logo展示
		swiperChange(id) {
			this.goPages('/subPages/company_home/index?id=' + id + '&exhibitionId=' + this.exhibitionId + '&code=0');
		},
		// 最新动态
		getNews() {
			let newsMsg = {
				page: this.page,
				pagesize: this.pageSize,
				zhanhui_id: this.exhibitionId
			};
			getHeavyNews(newsMsg)
				.then(res => {
					if (res.code == 0) {
						this.listInfo.push(...res.data);
						if (res.data.length == 0) {
							this.status = 'nomore';
							this.suo = false;
						} else if (res.data.length < 10) {
							this.status = 'nomore';
							this.suo = false;
						} else {
							this.status = 'loadmore';
							this.suo = true;
						}
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取重磅新闻失败');
				});
		},
		goJoin() {
			this.getInfo();
		},
		// 去展馆列表页面
		searchFocus(val) {
			this.goPages('/subPages/exhibition/gallery/index?exhibitionId=' + this.exhibitionId + '&searchV=' + val);
		}
	}
};
</script>

<style lang="scss" scoped>
.header {
	width: 100%;
	// background-color: $color2;
	padding-bottom: 10rpx;

	.head_img {
		position: relative;

		.img {
			width: 100%;
			height: 300rpx;
			border-radius: 0;
		}
	}
}

.cont {
	.time {
		color: $color8;
	}

	.tag {
		text {
			background-color: #f2f2f2;
			border-radius: 10rpx;
		}
	}
}

.detail_popup {
	max-height: 700rpx;
}

.cont_tit {
	margin-top: -50rpx;
	position: relative;

	.status_day {
		min-width: 140rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		color: #ffffff;
		font-size: 24rpx;
		border-radius: 10rpx;
		background: rgba(249, 176, 66, 1);
	}
}

.num_warp {
	width: 100%;

	.line {
		border-left: 1px solid #c7c7c7;
		height: 70rpx;
	}
}

.show_text {
	.show_row:last-child {
		margin-bottom: 0;
	}

	.show_row {
		margin-bottom: 12rpx;

		.scroll_cont {
			white-space: nowrap;
			width: calc(100% - 120rpx);
		}

		.label {
			// min-width: 110rpx;
			font-weight: bold;
			color: $color3;
			margin-right: 15rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 42rpx;
		}

		.tit_cont {
			// min-width: 125rpx;
			position: relative;

			.label_hot {
				position: absolute;
				right: 0;
				border-radius: 20rpx;
				/*  #ifdef H5 */
				transform: scale(0.8);
				font-size: 10rpx;
				top: -22rpx;
				/*  #endif  */
				/*  #ifdef MP-WEIXIN */
				font-size: 15rpx;
				top: -10rpx;
				/*  #endif  */
				padding: 3rpx 5rpx;
				animation: hot 0.8s ease 1s infinite alternate;
			}

			@keyframes hot {
				from {
					/*  #ifdef H5 */
					top: -33rpx;
					/*  #endif  */
					/*  #ifdef MP-WEIXIN */
					top: -20rpx;
					/*  #endif  */
				}

				to {
					/*  #ifdef H5 */
					top: -22rpx;
					/*  #endif  */
					/*  #ifdef MP-WEIXIN */
					top: -10rpx;
					/*  #endif  */
				}
			}
		}

		.show_child {
			display: inline-block;
			text-align: center;
			font-size: 24rpx;
		}
	}
}

.scroll_cont {
	white-space: nowrap;
}

.company_logo {
	display: inline-block;

	image {
		width: 150rpx;
		height: 120rpx;
	}
}
</style>
